<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>第2讲   Vue.js 运行原理</title>
		<script type="text/javascript" src="../public/vue.js"></script>

		<style>
			body{
				padding: 20px 50px;
			}

			.titleColor {
				color: red;
				font-size: 24px;
				font-weight: bolder;
				margin-bottom: 30px;
			}
		</style>
	</head>
	<body>

		<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&第1个&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
		<div id="app">
			<span class="titleColor">
				第1个（ 属性与方法~每个 Vue 实例都会代理其 data 对象里所有的属性 ）:
			</span> 
			<br/>
			<pre>
				var data = { a: 1 };
				var vm = new Vue({
					data: data
				})
				vm.a === data.a     // -> true
				console.log("data.a:" + data.a);   // -> data.a:1
				console.log("vm.a:" + vm.a);       // -> vm.a:1
				console.log("vm.a == data.a是"+(vm.a == data.a));  // -> vm.a == data.a是true
				console.log("vm.a === data.a是"+(vm.a === data.a));// -> vm.a === data.a是true
			</pre>
		</div><br/>

		<script type="text/javascript">
			var data = { a: 1 };
			var vm = new Vue({
				data: data
			})
			vm.a === data.a // -> true
			console.log("第1个（ 属性与方法~每个 Vue 实例都会代理其 data 对象里所有的属性 ）");
			console.log("data.a:" + data.a);
			console.log("vm.a:" + vm.a);
			console.log("vm.a == data.a是"+(vm.a == data.a));
			console.log("vm.a === data.a是"+(vm.a === data.a));
		</script>


		<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&第2个&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
		<div id="app2">
			<span class="titleColor">
				第2个（ 设置属性也会影响到原始数据 ）:
			</span> 
			<br/>
			<pre>
				var data = { a: 1 };
				var vm = new Vue({
					data: data
				})
				vm.a === data.a     // -> true

				/*设置属性也会影响原始数据*/
					vm.a = 2
					data.a // -> 2 			
					data.a = 3
					vm.a // -> 3
				/*设置属性也会影响原始数据*/

				console.log("data.a:" + data.a);   // -> data.a:3
				console.log("vm.a:" + vm.a);       // -> vm.a:3
				console.log("vm.a == data.a是"+(vm.a == data.a));  // -> vm.a == data.a是true
				console.log("vm.a === data.a是"+(vm.a === data.a));// -> vm.a === data.a是true
			</pre>
		</div><br/>

		<script type="text/javascript">
			var data = { a: 1 };
			var vm = new Vue({
				data: data
			})
			vm.a === data.a // -> true

			/*设置属性也会影响原始数据*/
			vm.a = 2
			data.a // -> 2 			
			data.a = 3
			vm.a // -> 3
			/*设置属性也会影响原始数据*/
			console.log("第2个（设置属性也会影响原始数据");
			console.log("data.a:" + data.a);
			console.log("vm.a:" + vm.a);
			console.log("vm.a == data.a是"+(vm.a == data.a));
			console.log("vm.a === data.a是"+(vm.a === data.a));
		</script>



		<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&第3个&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
		<div id="app3">
			<span class="titleColor">
				第3个（ Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分 ）:
			</span> 
			<br/>
			<pre>
				var data = { a: 1 }
				var vm = new Vue({
				  el: '#app3',
				  data: data
				})
				vm.$data === data // -> true
				vm.$el === document.getElementById('app3') // -> true
			</pre>
		</div><br/>
		<script>
			var data = { a: 1 }
			var vm = new Vue({
				el: '#app3',
				data: data
			})
			vm.$data === data // -> true
			vm.$el === document.getElementById('app3') // -> true

			console.log("第3个 Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分");			
			console.log(vm.$data);
			console.log("vm.$data.a="+ ' '+vm.$data.a);

			console.log(data);
			console.log("data.a="+ ' '+data.a);

			console.log(vm.$el);
			console.log(document.getElementById('app3'));

		</script>


		<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&第4个&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
		<div id="app3">
			<span class="titleColor">
				第4个（ Vue 实例生命周期~~在这个过程中，实例也会调用一些生命周期钩子 （ 如： created、 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例）:
			</span> 
			<br/>
			<pre>
				var vm = new Vue({
				  data: {
					a: 1
				  },
				  created: function () {
					// `this` 指向 vm 实例
					console.log('a is: ' + this.a)
				  }
				})
				// -> "a is: 1"
			</pre>
		</div><br/>
		<script>
			var vm = new Vue({
				data: {
					a: 1
				},
				created: function () {
					// `this` 指向 vm 实例
					console.log('a is: ' + this.a)
				}
			})
			// -> "a is: 1"
			console.log("第4个（ Vue 实例生命周期~~在这个过程中，实例也会调用一些生命周期钩子 （ 如： created、 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例）");		

		</script>
	</body>
</html>


































